<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue组件通信例子</title>
        <style media="screen">
            #show-box {
                width: 420px;
                height: 50px;
                font-size: 26px;
                border: 4px solid #D9534F;
                display: block;
                overflow: hidden;
                text-align: right;
                line-height: 50px;
            }
            #controller {
                width: 450px;
                display: block;
                box-sizing: border-box;
            }
            #controller ul {
                padding-left: 0;
                width: 100%;
            }
            #controller ul::after {
                display: block;
                clear: both;
                content: "";
            }
            #controller li {
                float: left;
                width: 80px;
                height: 50px;
                text-align: center;
                border: 1px solid skyblue;
                cursor: pointer;
                list-style: none;
                box-sizing: border-box;
                margin: 3px;
                line-height: 50px;
            }
            #controller li:active {
                background: red;
            }
            #controller .larger {
                width: 160px;
            }
        </style>
    </head>
    <body>
        <!-- 1.确认组件之间的父子关系 2.先确认两个组件之间的事件可以正常触发 3.在父组件调用子组件的时候，通过v-on监听自定义事件，自定义事件的回调执行父组件的方法 4.在子组件的事件里通过this.$emit("自定义事件",参数)触发 -->

        <!-- 本计算器使用的是props方法 -->
        <div id="app">
            <!-- 显示框 -->
            <show-box v-bind:input-show="inputShow"></show-box>
            <!-- 控制器 -->
            <div id="controller">
                <ul>
                    <li v-on:click="operator('clear')">C</li>
                    <li v-on:click="operator('opposite')">+/-</li>
                    <li v-on:click="operator('percent')">%</li>
                    <li v-on:click="operator('backspace')" class="larger">←</li>
                    <li v-on:click="inp(7)">7</li>
                    <li v-on:click="inp(8)">8</li>
                    <li v-on:click="inp(9)">9</li>
                    <li v-on:click="operator('plus')">+</li>
                    <li v-on:click="operator('minus')">-</li>
                    <li v-on:click="inp(4)">4</li>
                    <li v-on:click="inp(5)">5</li>
                    <li v-on:click="inp(6)">6</li>
                    <li v-on:click="operator('multiply')">×</li>
                    <li v-on:click="operator('divide')">÷</li>
                    <li v-on:click="inp(1)">1</li>
                    <li v-on:click="inp(2)">2</li>
                    <li v-on:click="inp(3)">3</li>
                    <li v-on:click="operator('pow')">×²</li>
                    <li v-on:click="operator('sqrt')">√</li>
                    <li v-on:click="inp(0)" class="larger">0</li>
                    <li v-on:click="inp('.')">.</li>
                    <li v-on:click="operator('result')" class="larger">=</li>
                </ul>
            </div>
        </div>

        <script src="../vue.js" charset="utf-8"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    inputShow: {
                        value: '0',
                        name: ''
                    },
                    string: [],
                    type: ''
                },
                components: {
                    'show-box': {
                        props: ['inputShow'],
                        computed: {
                            value: function () {
                                return this.inputShow.value
                            }
                        },
                        template: '<input id="show-box" type="text"  v-model="value" readonly="readonly">'
                    }
                },
                methods: {
                    result: function (value) {
                        var result = new Array;
                        if (value.length % 2 == 0) {
                            result.push((value[value.length - 2]));
                            result.push((value[value.length - 1]));
                            return (result);
                        } else {
                            result.push((value[value.length - 1]))
                            result.push((value[value.length - 2]))

                            return (result);
                        }
                    },
                    inp: function (num) {
                        input = this.inputShow;
                        // 判断是否之前输入过计算符号
                        if (input.name == "type") {
                            input.value = " ";
                            input.name = " ";
                        }
                        if (num != "." && input.value[0] == 0 && input.value[1] != ".") {
                            input.value = num; //重置
                        } else if (num == "." && input.value.toString().indexOf(".") > -1) {
                            input.value = input.value; // 只能有一个圆点
                        } else if (input.value == "NaN" || input.value == "Infinity") {
                            input.value = "";
                            input.value += num.toString();
                        } else {
                            input.value += num.toString();
                        }
                    },
                    //  检测是否为数字
                    check: function (inputvalue) {
                        if (inputvalue == "+" || inputvalue == "-" || inputvalue == "×" || inputvalue == "÷" || input.value == "0") {
                            return 0;
                        }
                    },
                    operator: function (type) {
                        switch (type) {
                            case "clear":
                                this.inputShow.value = "0";
                                this.string.length = 0;

                                break;

                            case "opposite":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.inputShow.value = -this.inputShow.value;
                                }
                                break;

                            case "backspace":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.inputShow.value = this.inputShow.value.toString().slice(0, -1);
                                    if (this.inputShow.value == "") {
                                        this.inputShow.value = "0";
                                    }
                                }
                                break;

                            case "percent":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.inputShow.value = this.inputShow.value / 100;
                                }
                                break;
                            case "pow":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.inputShow.value = Math.pow(this.inputShow.value, 2);
                                }
                                break;
                            case "sqrt":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.inputShow.value = Math.sqrt(this.inputShow.value);
                                }
                                break;

                            case "plus":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.string.push(this.inputShow.value);
                                    this.type = "plus"
                                    this.inputShow.value = "+";
                                    this.inputShow.name = "type";
                                }
                                break;
                            case "minus":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.string.push(this.inputShow.value);
                                    this.type = "minus"
                                    this.inputShow.value = "-";
                                    this.inputShow.name = "type";
                                }
                                break;
                            case "multiply":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.string.push(this.inputShow.value);
                                    this.type = "multiply"
                                    this.inputShow.value = "×";
                                    this.inputShow.name = "type";
                                }
                                break;
                            case "divide":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.string.push(this.inputShow.value);
                                    this.type = "divide"
                                    this.inputShow.value = "÷";
                                    this.inputShow.name = "type";
                                }
                                break;

                            case "result":
                                if (this.check(this.inputShow.value) != 0) {
                                    this.string.push(this.inputShow.value);
                                    if (parseInt(this.string.length) % 2 != 0) {
                                        this.string.push(this.string[this.string.length - 2])
                                    }
                                    if (this.type == "plus") {
                                        this.inputShow.value = parseFloat(this.result(this.string)[0]) + parseFloat(this.result(this.string)[1]);
                                        this.inputShow.name = "type"
                                    } else if (this.type == "minus") {
                                        this.inputShow.value = parseFloat(this.result(this.string)[0]) - parseFloat(this.result(this.string)[1]);
                                        this.inputShow.name = "type"
                                    } else if (this.type == "multiply") {
                                        this.inputShow.value = parseFloat(this.result(this.string)[0]) * parseFloat(this.result(this.string)[1]);
                                        this.inputShow.name = "type"
                                    } else if (this.type == "divide") {
                                        this.inputShow.value = parseFloat(this.result(this.string)[0]) / parseFloat(this.result(this.string)[1]);
                                        this.inputShow.name = "type"
                                    }
                                    break;
                                }
                        }
                    }
                }
            })
        </script>
    </body>
</html>
